<template lang="html">
  <div class="news-detail" v-if="detail">
    <div class="banner">
      <img class="max" :src="detail.photo">
    </div>
    <div class="card-box">
      <Card :detail="detail" type="detail" @clickZan="clickZan" />
    </div>
    <article>
      {{ detail.content }}
    </article>
    <div class="comment-wrap">
      <div class="head">
        评论
      </div>
      <div class="comment-list" v-if="detail.comment && detail.comment.length != 0">
        <CommentList :commentList="detail.comment" @clickZanComment="clickZanComment" />
      </div>
      <div class="no-data" v-else>
        <img class="max" src="/static/modules/news/information_img_comment@2x.png">
        <p>暂无评论</p>
      </div>
    </div>
    <div class="comment-pl" @click="showCommentInput = true">
      <div class="comment-content">
        <input type="text" placeholder="发表你的评论" name="" value="">
      </div>
      <div class="comment-btn">
        发布
      </div>
    </div>
    <div class="dialog-mask comment-input" v-show="showCommentInput">
      <div class="dialog-mask-bg" @click="showCommentInput = false"></div>
      <div class="dialog-mask-wrap">
        <div class="dialog-mask-main">
          <textarea name="name" placeholder="请输入评论内容" rows="4" v-model="commentContent"></textarea>
          <div class="ci-info">
            <div :class="isAnonymous?'ci-anonymous ci-anonymous-active':'ci-anonymous'" @click="clickAnonymous">
              <i v-if="isAnonymous"><img class="max" src="/static/modules/news/information_icon_check_press@3x.png"></i>
              <i v-else><img class="max" src="/static/modules/news/information_icon_check_nor@3x.png"></i>
              匿名
            </div>
            <div class="ci-btns">
              <div class="ci-btn ci-btn-cancel" @click="showCommentInput = false">
                取消
              </div>
              <div class="ci-btn ci-btn-submit" @click="clickComment">
                发布
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="dialog-mask-close" @click="showCommentInput = false">
          <img class="max" src="/static/modules/common/dialog-mask-close.png">
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import Card from './components/Card'
import CommentList from './components/CommentList'
import { getNewsDetail, getNewsAdd, getNewsComment } from '@/api/modules/news'
import { Toast } from "mint-ui";
export default {
  components: {
    Card,
    CommentList,
  },
  data() {
    return {
      showCommentInput: false,
      isAnonymous: false,
      id: this.getUrlParams('id'),
      detail: null,
      commentContent: null,
    }
  },
  created() {
    this.getNewsDetail();
  },

  methods: {
    // 分享文章
    shareArticle() {
      this.wxShare({
        title: this.detail.title,
        desc: this.detail.summarize,
        link: window.location.href.split('#')[0],
        img: this.detail.photo,
        success: () =>{
          getNewsAdd({
            article_id: this.id,
            ope_type: 'tran',
            uid: this.getUserInfo().id
          }).then(res=>{

          })
        }
      })
    },
    // 点赞评论
    clickZanComment(id) {
      getNewsComment({
        uid: this.getUserInfo().id,
        commentid: id,
        article_id: this.id,
        ope_type: 'like',
      }).then(res=>{
        Toast(res.msg)
        if(res.code == 0){
          this.getNewsDetail();
        }
      })
    },
    // 点赞文章
    clickZan(value) {
      getNewsAdd({
        article_id: value,
        ope_type: 'like',
        uid: this.getUserInfo().id
      }).then(res=>{
        Toast(res.msg)
        if(res.code == 0){
          this.getNewsDetail();
        }
      })
    },
    // 获取详情
    getNewsDetail() {
      getNewsDetail({
        uid: this.getUserInfo().id,
        get_type: 'detail',
        article_id: this.id,
      }).then(res=>{
        console.log(res)
        this.detail = res.data;
        this.shareArticle();
      })
    },

    clickAnonymous() {
      this.isAnonymous = !this.isAnonymous;
    },
    //
    // 评论
    clickComment() {
      if(!this.commentContent){
        Toast('请输入评论内容')
        return
      }
      getNewsComment({
        uid: this.getUserInfo().id,
        article_id: this.id,
        ope_type: 'comment',
        content: this.commentContent,
        is_cryptonym: this.isAnonymous?'yes':'no'
      }).then(res=>{
        Toast(res.msg)
        this.showCommentInput = false;
        if(res.code == 0){
          this.getNewsDetail();
          this.commentContent = null;
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.news-detail{
  background-color: #fff;
  padding-bottom: 1.4rem;
  article{
    padding: .4rem;
    line-height: .7rem;
  }
  .no-data{
    width: 3.4rem;
    padding: 1rem 0;
    margin: 0 auto;
    text-align: center;
    color: #999;
    img{
      margin-bottom: .2rem;
    }
  }
  .head{
    margin-left: .6rem;
    position: relative;
    padding-left: .4rem;
    margin-bottom: .4rem;
    font-size: .4rem;
    font-weight: 500;
    &::before{
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      width: 5px;
      height: 100%;
      border-radius: .6rem;
      background-color: #4F80FF;
    }
  }
  .comment-pl{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    .comment-content{
      float: left;
      width: 80%;
      border-top: 1px solid #f7f7f7;
      margin-top: -1px;
      input{
        padding: 0 3%;
        line-height: 1.2rem;
        color: #999;
        width: 100%;
      }
    }
    .comment-btn{
      background-color: #036FF5;
      color: #fff;
      text-align: center;
      width: 20%;
      float: right;
      line-height: 1.2rem;
    }
  }
  .comment-input{
    textarea{
      border: 1px solid #ddd;
      padding: .3rem;
      border-radius: .2rem;
      width: 100%;
    }
    .ci-info{
      overflow: hidden;
      margin-top: .2rem;
      .ci-anonymous{
        float: left;
        color: #888;
        line-height: .7rem;
        i{
          display: inline-block;
          width: .65rem;
          img{
            vertical-align: middle;
            margin-top: -.05rem;
          }
        }
      }
      .ci-anonymous-active{
        color: #036FF5;
      }
      .ci-btns{
        float: right;
        .ci-btn{
          float: left;
          padding: .15rem .2rem;
          letter-spacing: 1px;
          font-size: .34rem;
        }
        .ci-btn-cancel{
          color: #888;
          margin-right: .2rem;
        }
        .ci-btn-submit{
          color: #fff;
          background: #036FF5;
          border-radius: .1rem;

        }
      }
    }
  }
}
</style>
